{% extends "base.html" %}

{% block title %}Тарифы{% endblock %}
{% block title_header %}Тарифы{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h6 class="text-lg font-semibold">Управление тарифами</h6>
        <button class="btn btn-primary" id="addTariffBtn">
            <i class="bi bi-plus-lg me-2"></i>Добавить тариф
        </button>
    </div>
    <div class="dataTables_wrapper">
        <table id="tariffsTable" class="table table-hover align-middle dataTable">
            <thead>
                <tr>
                    <th class="text-sm" style="width: 60px;">ID</th>
                    <th class="text-sm" style="width: 200px;">Название</th>
                    <th class="text-sm">Описание</th>
                    <th class="text-sm" style="width: 120px;">Цена</th>
                    <th class="text-sm" style="width: 120px;">Дней</th>
                    <th class="text-sm" style="width: 120px;">Сервер</th>
                    <th class="text-sm" style="width: 100px;">Статус</th>
                    <th class="text-sm" style="width: 120px;">Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for tariff in tariffs %}
                <tr>
                    <td class="text-sm">{{ tariff.id }}</td>
                    <td class="text-sm">{{ tariff.name }}</td>
                    <td class="text-sm">{{ tariff.description }}</td>
                    <td class="text-sm">{{ "%.2f"|format(tariff.price) }} ₽</td>
                    <td class="text-sm">{{ tariff.left_day }}</td>
                    <td class="text-sm">{{ tariff.server_name or '-' }}</td>
                    <td>
                        {% if tariff.is_enable %}
                        <span class="text-sm">Активен</span>
                        {% else %}
                        <span class="text-sm" style="color: rgb(235, 137, 137);">Отключен</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm edit-btn" style="color: white;" data-id="{{ tariff.id }}">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <button class="btn btn-sm delete-btn" style="color: white;" data-id="{{ tariff.id }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Модальное окно удаления -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Подтверждение удаления</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Вы действительно хотите удалить этот тариф?</p>
                <p class="mb-0"><strong>Тариф:</strong> <span id="deleteTariffName"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="bi bi-trash"></i> Удалить
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно редактирования -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Редактирование тарифа</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editForm" class="needs-validation" novalidate>
                    <input type="hidden" id="tariffId">
                    <div class="mb-3">
                        <label for="name" class="form-label">Наименование</label>
                        <input type="text" class="form-control" id="name" required>
                        <div class="invalid-feedback">
                            Пожалуйста, введите наименование тарифа
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Описание</label>
                        <textarea class="form-control" id="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="price" class="form-label">Цена</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="price" step="0.01" required>
                            <span class="input-group-text">₽</span>
                        </div>
                        <div class="invalid-feedback">
                            Пожалуйста, укажите цену
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="left_day" class="form-label">Количество дней</label>
                        <input type="number" class="form-control" id="left_day" required>
                        <div class="invalid-feedback">
                            Пожалуйста, укажите количество дней
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_enable" checked>
                            <label class="form-check-label" for="is_enable">Активен</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="server_id" class="form-label">Сервер</label>
                        <select class="form-select" id="server_id">
                            <option value="">Выберите сервер</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="saveBtn">
                    <i class="bi bi-save"></i> Сохранить
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно просмотра -->
<div class="modal fade" id="viewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Информация о тарифе</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <dl class="row">
                    <dt class="col-sm-4">Наименование</dt>
                    <dd class="col-sm-8" id="viewName"></dd>
                    
                    <dt class="col-sm-4">Описание</dt>
                    <dd class="col-sm-8" id="viewDescription"></dd>
                    
                    <dt class="col-sm-4">Цена</dt>
                    <dd class="col-sm-8" id="viewPrice"></dd>
                    
                    <dt class="col-sm-4">Дней</dt>
                    <dd class="col-sm-8" id="viewDays"></dd>
                    
                    <dt class="col-sm-4">Статус</dt>
                    <dd class="col-sm-8" id="viewStatus"></dd>
                    
                    <dt class="col-sm-4">Сервер</dt>
                    <dd class="col-sm-8" id="viewServer"></dd>
                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function getCountryCode(serverName) {
    // Проверяем, начинается ли имя сервера с эмодзи флага
    const match = serverName.match(/^(?:\uD83C[\uDDE6-\uDDFF]){2}/);
    if (!match) return null;

    // Получаем Unicode символы флага
    const flag = match[0];
    // Преобразуем Unicode в буквенный код страны
    const code = Array.from(flag)
        .map(char => char.codePointAt(0))
        .map(code => String.fromCharCode(code - 127397))
        .join('')
        .toLowerCase();
    
    return code;
}

function formatServerName(serverName) {
    if (!serverName) return '-';
    
    const code = getCountryCode(serverName);
    if (!code) return serverName;

    // Получаем название страны (убираем эмодзи флага)
    const name = serverName.replace(/^(?:\uD83C[\uDDE6-\uDDFF]){2}\s*/, '');
    
    return `<div class="d-flex align-items-center gap-2">
              <img src="/static/flag/${code}.svg" alt="${code}" style="width: 16px; height: 16px;">
              <span>${name}</span>
            </div>`;
}

$(document).ready(function() {
    // Инициализация DataTables
    const table = $('#tariffsTable').DataTable({
        language: {
            "processing": "Подождите...",
            "search": "Поиск:",
            "lengthMenu": "_MENU_ записей",
            "info": "Записи с _START_ до _END_ из _TOTAL_",
            "infoEmpty": "Записи с 0 до 0 из 0 записей",
            "infoFiltered": "(отфильтровано из _MAX_ записей)",
            "loadingRecords": "Загрузка записей...",
            "zeroRecords": "Записи отсутствуют.",
            "emptyTable": "В таблице отсутствуют данные",
            "paginate": {
                "first": "«",
                "previous": "‹",
                "next": "›",
                "last": "»"
            }
        },
        order: [[0, 'desc']],
        pageLength: 10,
        responsive: true,
        autoWidth: false,
        columnDefs: [
            { orderable: false, targets: 7 },
            {
                targets: 5, // Колонка с сервером
                render: function(data, type, row) {
                    if (type === 'display') {
                        return formatServerName(data);
                    }
                    return data;
                }
            }
        ]
    });

    // Загрузка списка серверов
    async function loadServers() {
        try {
            const response = await fetch('/admin/tariffs/servers');
            const servers = await response.json();
            const serverSelect = $('#server_id');
            serverSelect.empty();
            serverSelect.append('<option value="">Выберите сервер</option>');
            servers.forEach(server => {
                serverSelect.append(`<option value="${server.id}">${server.name}</option>`);
            });
        } catch (error) {
            console.error('Ошибка при загрузке серверов:', error);
        }
    }

    // Загрузка серверов при инициализации
    loadServers();

    // Обработчик для кнопки редактирования
    $(document).on('click', '.edit-btn', async function() {
        const tariffId = $(this).data('id');
        try {
            const response = await fetch(`/admin/tariffs/edit/${tariffId}`);
            if (!response.ok) throw new Error('Ошибка при загрузке данных');
            const tariff = await response.json();
            
            // Заполняем форму данными
            $('#tariffId').val(tariff.id);
            $('#name').val(tariff.name);
            $('#description').val(tariff.description);
            $('#price').val(tariff.price);
            $('#left_day').val(tariff.left_day);
            $('#is_enable').prop('checked', tariff.is_enable);
            $('#server_id').val(tariff.server_id);
            
            // Показываем модальное окно
            const editModal = new bootstrap.Modal(document.getElementById('editModal'));
            editModal.show();
        } catch (error) {
            console.error('Ошибка:', error);
            alert('Произошла ошибка при загрузке данных тарифа');
        }
    });

    // Обработчик для кнопки удаления
    $(document).on('click', '.delete-btn', function() {
        const tariffId = $(this).data('id');
        const tariffName = $(this).closest('tr').find('td:eq(1)').text();
        $('#deleteTariffName').text(tariffName);
        $('#confirmDeleteBtn').data('id', tariffId);
        const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        deleteModal.show();
    });

    // Обработчик для кнопки сохранения
    $('#saveBtn').click(async function() {
        const form = document.getElementById('editForm');
        if (!form.checkValidity()) {
            form.classList.add('was-validated');
            return;
        }

        const tariffId = $('#tariffId').val();
        const tariffData = {
            name: $('#name').val(),
            description: $('#description').val(),
            price: parseFloat($('#price').val()),
            left_day: parseInt($('#left_day').val()),
            is_enable: $('#is_enable').is(':checked'),
            server_id: $('#server_id').val() || null
        };

        try {
            const url = tariffId ? `/admin/tariffs/edit/${tariffId}` : '/admin/tariffs/create';
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(tariffData)
            });

            if (!response.ok) throw new Error('Ошибка при сохранении');
            
            // Закрываем модальное окно и обновляем таблицу
            bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
            window.location.reload();
        } catch (error) {
            console.error('Ошибка:', error);
            alert('Произошла ошибка при сохранении тарифа');
        }
    });

    // Обработчик для кнопки подтверждения удаления
    $('#confirmDeleteBtn').click(async function() {
        const tariffId = $(this).data('id');
        try {
            const response = await fetch(`/admin/tariffs/delete/${tariffId}`, {
                method: 'POST'
            });

            if (!response.ok) throw new Error('Ошибка при удалении');
            
            // Закрываем модальное окно и обновляем таблицу
            bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
            window.location.reload();
        } catch (error) {
            console.error('Ошибка:', error);
            alert('Произошла ошибка при удалении тарифа');
        }
    });

    // Обработчик для кнопки добавления
    $('#addTariffBtn').click(function() {
        // Очищаем форму
        $('#editForm').trigger('reset');
        $('#tariffId').val('');
        $('#editForm').removeClass('was-validated');
        
        // Показываем модальное окно
        const editModal = new bootstrap.Modal(document.getElementById('editModal'));
        editModal.show();
    });
});
</script>
{% endblock %}